<template>
  <el-card>
    <div class="flex justify-between items-center mb-20px">
      <h4>查看详情</h4>
      <el-button
        @click="
          () => {
            $router.back()
            delVisitedView(route)
          }
        "
        >返回</el-button
      >
    </div>
    <el-row class="mb-10px">
      <el-col :span="2"> 用户ID： </el-col>
      <el-col :span="10">{{ detail?.id }}</el-col>
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 用户昵称： </el-col>
      <el-col :span="10">{{ detail?.nickname }}</el-col>
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 头像： </el-col>
      <el-col :span="10">
        <UploadImg
          :modelValue="detail?.avatar"
          :showDelete="false"
          width="100px"
          height="100px"
          disabled
        />
      </el-col>
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 手机号码： </el-col>
      <el-col :span="10">{{ detail?.mobile }}</el-col>
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 会员状态： </el-col>
      <el-col :span="10">{{ detail?.membershipName || '非会员' }}</el-col>
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 剩余咨询次数： </el-col>
      <el-col :span="10"
        >{{ detail?.remainingConsultationFrequency || 0 }}/{{
          detail?.consultationsTotalNumber || 0
        }}</el-col
      >
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 剩余报名次数： </el-col>
      <el-col :span="10">
        {{ detail?.remainingRegistrationsFrequency || 0 }}/{{
          detail?.registrationsTotalNumber || 0
        }}
      </el-col>
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 会员有效期： </el-col>
      <el-col :span="10">{{
        formatDate(detail?.memberPurchaseDate as Date) +
        '-' +
        formatDate(detail?.memberExpirationDate as Date)
      }}</el-col>
    </el-row>
    <el-row class="mb-10px">
      <el-col :span="2"> 创建时间： </el-col>
      <el-col :span="10">{{ formatDate(detail?.createTime as Date) }}</el-col>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">
import { UserApi, User } from '@/api/biz/user'
import { formatDate } from '@/utils/formatTime'
import { useTagsViewStore } from '@/store/modules/tagsView'

const { delVisitedView } = useTagsViewStore()
const route = useRoute()
const id = +route.params.id
const detail = ref<User>()

UserApi.getUser(id).then((data) => {
  detail.value = data
})
</script>
